<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Jumlah Penambahan Bangku Kelas - Propinsi Kalimantan Timur</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#container').highcharts({
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: 'Jumlah Penduduk Berdasarkan Jenis Kelamin'
                    },
                    subtitle: {
                        text: 'Tahun 2014 Banyuwangi'
                    },
                    xAxis: {
                        categories: [
                            'Pesanggaran',
                            'Siliragung',
                            'Bangorejo',
                            'Purwoharjo',
                            'Tegaldlimo',
                            'Muncar',
                            'Cluring',
                            'Gambiran',
                            'Tegalsari',
                            'Glenmore',
                            'Kalibaru',
                            'Genteng',
                            'Srono',
                            'Rogojampi',
                            'Kabat',
                            'Singojuruh',
                            'Sempu',
                            'Songgon',
                            'Glagah',
                            'Licin',
                            'Banyuwangi',
                            'Giri',
                            'Kalipuro',
                            'Wongsorejo'
                        ],
                        labels: {
                            rotation: -70,
                            style: {
                                fontSize: '13px',
                                fontFamily: 'Verdana, sans-serif'
                            }
                        }
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'Jumlah (orang)'
                        }
                    },
                    tooltip: {
                        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                                '<td style="padding:0"><b>{point.y:.0f} mm</b></td></tr>',
                        footerFormat: '</table>',
                        shared: true,
                        useHTML: true
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0
                        }
                    },
                    series: [{
                            name: 'Laki-Laki',
                            data: [24.755, 22.796, 30.239, 32.796, 31.238, 65.628, 35.327, 29.234, 23.417, 34.340, 30.437, 41.830, 43.966, 46.299, 33.518, 22.323, 35.814, 25.054, 16.845, 13.951, 52.544, 14.688, 38.035, 37.016],
                            dataLabels: {
                                enabled: true,
                                rotation: -90,
                                color: '#000000',
                                align: 'right',
                                x: 4,
                                y: -50,
                                style: {
                                    fontSize: '13px',
                                    fontFamily: 'Verdana, sans-serif',
                                    textShadow: '0 0 1px black'
                                }
                            }

                        }, {
                            name: 'Perempuan',
                            data: [24.254, 22.206, 30.000, 32.997, 30.749, 64.642, 35.737, 29.921, 23.403, 35.957, 31.383, 42.224, 44.387, 47.247, 34.260, 23.512, 36.292, 25.824, 17.664, 14.233, 54.761, 14.178, 38.765, 38.092],
                            dataLabels: {
                                enabled: true,
                                rotation: -90,
                                color: '#000000',
                                align: 'right',
                                x: 4,
                                y: -50,
                                style: {
                                    fontSize: '13px',
                                    fontFamily: 'Verdana, sans-serif',
                                    textShadow: '0 0 1px black'
                                }
                            }

                        }]
                });
            });


        </script>
    </head>
    <body>
        <script src="../../js/highcharts.js"></script>
        <script src="../../js/modules/exporting.js"></script>

        <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

    </body>
</html>
